<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { onMounted  } from 'vue';
import * as echarts from 'echarts';
// 模拟数据
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
interface User {
  rank: number;
  username: string;
  questions: string;
}
const route = useRoute();

// 使用 ref 来创建响应式的 activeMenuIndex
const activeMenuIndex = ref('/project/myproject/all');

// 监听路由变化，更新 activeMenuIndex
const updateActiveMenu = () => {
  activeMenuIndex.value = route.path;
};

// 当组件挂载时，更新一次 activeMenuIndex
onMounted(() => {
  updateActiveMenu();
});

// 监听路由变化
router.afterEach(() => {
  updateActiveMenu();
});


</script>

<template>
    <div class="total">
        <el-row class="header-row">
            <el-col :span="18">
                <el-menu
                    class="el-menu-popper-demo"
                    mode="horizontal"
                    :popper-offset="16"
                    style="width: 600px;"
                    default-active="activeMenuIndex"
                    collapse-transition="false"
                    router
                >
                    <el-menu-item index="/project/myproject/all">项目整体概括</el-menu-item>
                    <el-menu-item index="/project/myproject/allProjectInfo">所有项目信息</el-menu-item>
                    <el-menu-item index="/project/myproject/myManagerProject">我管理的项目</el-menu-item>
                    <el-menu-item index="/project/myproject/myCreateProjet">我创建的项目</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="6" >
                <el-input
                    placeholder="请输入内容"
                    prefix-icon="Search"
                    class="search-input"
                    style="margin-top: 20px;margin-right:100px;"
                ></el-input>    
            </el-col>
            <el-main>
                <RouterView></RouterView>
            </el-main>
            
        </el-row>
    </div>
</template>



<style scoped>

</style>